<template>
<div class="Ongoing">
  <div class="content">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="listLoading" :finished="finished" :offset="50"
                  :immediate-check="false" finished-text="暂无数据" @load="onLoad">
          <div class="list">
            <div class="info">
              <img class="wepay" src="/static/images/wpay.png" />
              <div class="flex">
                <div class="text">微信支付</div>
                <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
              </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
          <div class="list">
            <div class="info">
              <img class="alipay" src="/static/images/alipay.png" />
              <div class="flex">
                <div class="text">支付宝支付</div>
                <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
              </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
          <div class="list">
            <div class="info">
              <img class="unionpay" src="/static/images/unionpay.png" />
              <div class="flex">
                <div class="text">银行卡支付</div>
                <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
              </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
          <div class="list">
            <div class="info">
              <img class="unionpay" src="/static/images/unionpay.png" />
              <div class="flex">
                  <div class="text">微信支付</div>
                  <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
                </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
          <div class="list">
            <div class="info">
              <img class="wepay" src="/static/images/wpay.png" />
              <div class="flex">
                <div class="text">微信支付</div>
                <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
              </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
          <div class="list">
            <div class="info">
              <img class="wepay" src="/static/images/wpay.png" />
              <div class="flex">
                <div class="text">微信支付</div>
                <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
              </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
          <div class="list">
            <div class="info">
              <img class="wepay" src="/static/images/wpay.png" />
              <div class="flex">
                <div class="text">微信支付</div>
                <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
              </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
          <div class="list">
            <div class="info">
              <img class="wepay" src="/static/images/wpay.png" />
              <div class="flex">
                <div class="text">微信支付</div>
                <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
              </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
          <div class="list">
            <div class="info">
              <img class="wepay" src="/static/images/wpay.png" />
              <div class="flex">
                <div class="text">微信支付</div>
                <div class="text"><span class="name">交易数量：</span><span class="n">3000.00 </span>ROG</div>
              </div>
            </div>
            <div class="btn">确认收款</div>
          </div>
      </van-list>
    </van-pull-refresh>
</div>
</div>
</template>
<script>
export default {
  name: 'Ongoing',
  data() {
    return {
      isLoading: false,
      listLoading: false,
      finished: false
    };
  },
  mounted() {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      setTimeout(() => {
        this.$set(this, 'finished', true);
      }, 500);
    }
  }
};
</script>
<style lang="scss" scoped>
.Ongoing{
  height: calc(100% - 150px);
.content{
    margin-top:20px;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 10px;
    .list{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 34px 20px;
      background-color: #fff;
      margin-top:10px;
      .info{
        display: flex;
        .wepay,.alipay,.unionpay{
          flex: 1;
          margin-top:10px;
        }
        .wepay{
           width: 66px;
           height: 57px;
        }
        .alipay{
          width: 66px;
          height: 66px;
        }
        .unionpay{
          width: 71px;
          height: 44px;
        }
        .flex{
          .text{
            display: block;
            line-height: 55px;
            .name{
              color: #999;
              font-size: 24px;
            }
          }
        }
        .text{
          color: #212121;
          line-height: 60px;
          font-size: 30px;
          margin-left:20px;
        }
      }
      .btn{
        background-color: #2C64EF;
        font-size: 30px;
        color: #fff;
        text-align: center;
        padding: 15px 46px;
        border-radius: 10px;
      }
    }
  }
}
</style>
